//设置根路径
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

const getGoodsList = async () => {
  //发起请求获取第一级数据
  const { data: res } = await axios({ method: 'get', url: '/api/category/top' })

  const requestArr = res.data.map(item => {
    return axios({ method: 'get', url: '/api/category/sub?id=' + item.id })
  })
  const resList = await Promise.all(requestArr)

  const renderDataList = resList.map(item => {
    const { data } = item
    return data
  })

  const renderList = renderDataList
    .map(item => {
      return `<li>
      <a href="javascript:;">${item.data.name}</a>
      <ul class="sub">
        ${item.data.children
          .map(item => {
            return `<li>
          <a href="javascript:;">
            <span>${item.name}</span>
            <img src="${item.picture}" alt="">
          </a>
        </li>`
          })
          .join('')}
      </ul>
    </li>`
    })
    .join('')

  document.querySelector('.top').innerHTML = renderList
}

getGoodsList()
//发起请求获取第一级数据
// axios({ method: 'get', url: '/api/category/top' })
//   .then(({ data: res }) => {
//     //发起二级数据的请求
//     const requestArr = res.data.map(item => {
//       return axios({ method: 'get', url: '/api/category/sub?id=' + item.id })
//     })

//     //继续使用获取到的数据进行渲染
//     return Promise.all(requestArr)
//   })
//   .then(res => {
//     const renderDataList = res.map(item => {
//       const { data } = item
//       return data
//     })
//     // console.log(renderDataList)
//     const renderList = renderDataList
//       .map(item => {
//         return `<li>
//       <a href="javascript:;">${item.data.name}</a>
//       <ul class="sub">
//         ${item.data.children
//           .map(item => {
//             return `<li>
//           <a href="javascript:;">
//             <span>${item.name}</span>
//             <img src="${item.picture}" alt="">
//           </a>
//         </li>`
//           })
//           .join('')}
//       </ul>
//     </li>`
//       })
//       .join('')

//     document.querySelector('.top').innerHTML = renderList
//   })
